
<template>
  <div class="input-bottom-culture specifics" >
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">

      <div class="input-bottom-dialogue-container-box">
        <div class="input-tip-title">
          <div class="tip">
            <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
          </div>
          <div class="title">总体介绍</div>
        </div>
        <div class="culture-AI">
          <div class="culture-left">
            <div>
              <div class="culture-container-title">文字介绍</div>
              <div class="culture-container">
                {{cultureIntroduction}}
              </div>
            </div>
          </div>
          <div class="culture-right">
            <div>
              <div class="culture-container-title">音频介绍</div>
              <div class="culture-container-video">
<!--                <div @click="stopAudio" id="audio-player" v-if="isPlay">-->

<!--                  <img style="width: 100px;height: 100px" src="@/assets/images/notLoggedIn/stop@2x.png">-->
<!--                </div>-->
<!--                <div @click="playAudio" id="audio-player" v-else>-->

<!--                  <img style="width: 100px;height: 100px" src="@/assets/images/notLoggedIn/play@2x.png">-->
<!--                </div>-->
                <div>
<!--                  显示-->

                  <audio  id="audio" :src="audioSrc" controls>

                  </audio>

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
//父级组件传过来的值
import api, {audioUrl} from "@/service/TouristHomepage";
import {ref} from "vue";
import axios from "axios";
const props = defineProps({
  selectCulturePlace: {
    type: Object,
    default: () => {
      return {}
    }
  },
  selectCultureInfo: {
    type: Object,
    default: () => {
      return {}
    }
  },
  currentVoice: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const cultureIntroduction=ref("")
const audioSrc=ref("")
function getInfoByKeywordApi(){
  // 创建一个Blob对象
if(props.selectCulturePlace.landmarkName && props.selectCultureInfo.name){
  let prarms={
    place:props.selectCulturePlace.landmarkName,
    info:props.selectCultureInfo.name,
  }
  api.getInfoByKeyword(prarms).then((res) => {
    console.log("getInfoByKeyword", res)
    cultureIntroduction.value=res.data.answer
    audioSrc.value=res.data.audio_path;
  })
}

}
let audioPlayer = ref(null);
async function getAudioByAudioPath(){
  const response = await axios({
    url: audioUrl,
    method: 'POST',
    responseType: 'blob', // 重要：指定响应类型为二进制流
    headers: {
      'Content-Type': 'application/json',
      // 如果需要认证，可以在这里添加认证头
      // 'Authorization': `Bearer ${token}`
    },
    data: {
      audioPath: audioSrc.value
    }
  });
  const blob = new Blob([response.data], { type: "audio/wav" });
  audioPlayer.value=document.getElementById("audio");
  audioPlayer.value.src = URL.createObjectURL(blob);
}
const isPlay=ref(false)
function playAudio(blob) {
  isPlay.value=!isPlay.value;
  audioPlayer.value.play();
}
function stopAudio(){
  isPlay.value=!isPlay.value;
  audioPlayer.value.pause();
}
// 监听
watch(() => props.currentVoice, (newValue, oldValue) => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    cultureIntroduction.value=props.currentVoice.answer
    audioSrc.value=props.currentVoice.audio_path;
  }else {
    getInfoByKeywordApi()

  }
})
onMounted(() => {
  // 判断props.currentVoice对象是否为空
  if(Object.keys(props.currentVoice).length!==0){
    cultureIntroduction.value=props.currentVoice.answer
    audioSrc.value=props.currentVoice.audio_path;
  }else {
    getInfoByKeywordApi()

  }

});
</script>
<style scoped lang="scss">
//  文化介绍等模块
.input-bottom-culture{

  display: flex;
  .input-bottom-dialogue-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 286px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);

    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .input-tip-title{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .title{
          width: 68px;
          height: 16px;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .culture-AI{
        height: 210px;
        display: flex;
        .culture-left{
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container{
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
        .culture-right{
          margin-left: 40px;
          width: 100%;
          height: 100%;
          background-image: url("@/assets/images/notLoggedIn/frame@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .culture-container-title{
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
            margin-bottom: 10px;
          }
          .culture-container-video{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 483px;
            height: 144px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            overflow: auto;
          }
        }
      }
    }


  }
}
</style>